<!-- 面包屑 -->
<template>
<div class="bread">
    <div class="bread-item">
        <router-link to="/" class="router-link-active">首页</router-link>
        <i class="iconfont icon-right"></i>
    </div>
    <div class="bread-item" v-for="item in result" :key="item.id">
        <router-link :to="`${item.id}`" class="router-link-active">{{ item.name }}</router-link>
        <i class="iconfont icon-right"></i>
    </div>
</div>
</template>

<script>
export default{
    name:'AppBread',
    data(){
        return{
            result:[],
        }
    },
    mounted(){
        // 通过根组件，设置全局事件的监听
        this.$bus.$on('bread',value=>{
            this.result=value
        });
    },
    beforeCreate(){
        // 移除监听
        this.$bus.$off('bread');
    }
}
</script>

<style lang="less" scoped>
@import url('@/assets/styles/variables.less');
.bread{
    display: flex;
    padding: 25px 10px;
    align-items: center;
    .bread-item{
        a{
            color:#666;
            transition: all 0.4s;
            &:hover{
                color: @themeColor;
            }
        }
        i{
            font-size: 12px;
            margin-left: 5px;
            margin-right: 5px;
            line-height: 22px;
        }

        &:last-child >i{
            /*隐藏最后一个 箭头icon*/
            display: none; 
        }
    }
}
</style>